<template>
  <div class="inputWrapper">
    <input
      :placeholder="tips"
      v-model="value"
      :type="type"
      :class="{ error: !isOk }"
      @blur="showErrorMsg"
    />
  </div>
</template>

<script>
export default {
  props: ["tips", "type", "rule", "errMsg"],
  data() {
    return {
      value: "",
      isOk: true,
    };
  },
  methods: {
    showErrorMsg() {
      if (!this.isOk) {
        this.$toast.fail("不合法");
        this.value = "";
      }
    },
  },
  watch: {
    value(newValue) {
      this.$emit("setValue", newValue);
      if (this.rule.test(newValue)) {
        this.isOk = true;
      } else {
        this.isOk = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  padding-bottom: 20/360 * 100vw;
  input {
    width: 100%;
    height: 45/360 * 100vw;
    line-height: 45/360 * 100vw;
    font-size: 18/360 * 100vw;
    border: none;
    outline: none;
    border-bottom: 1px solid #333;
    background-color: #f2f2f2;
  }
  .error {
    border-color: red;
  }
}
</style>